<template>

  <div class="Awards">

    <section>
      <div class="">
        <mdb-row class="col-md-4">
          <mdb-col>
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(31).jpg"
              alt="Sample image"
              class="img-fluid"
              v-animateOnScroll="{animation: 'bounceInLeft', delay: 300, position: 20}"
            >
          </mdb-col>
          <mdb-col>
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(32).jpg"
              alt="Sample image"
              class="img-fluid"
              v-animateOnScroll="'tada'"
            >
          </mdb-col>
          <mdb-col>
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(73).jpg"
              alt="Sample image"
              class="img-fluid"
              v-animateOnScroll="{animation: 'fadeInLeft', delay: 200}"
            >
          </mdb-col>
        </mdb-row>
        <mdb-row class="col-md-4">
          <mdb-col>
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg"
              alt="Sample image"
              class="img-fluid"
              v-animateOnScroll="'fadeInRight'"
            >
          </mdb-col>
          <mdb-col>
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).jpg"
              alt="Sample image"
              class="img-fluid"
              v-animateOnScroll="'fadeIn'"
            >
          </mdb-col>
          <mdb-col>
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"
              alt="Sample image"
              class="img-fluid"
              v-animateOnScroll="'rollIn'"
            >
          </mdb-col>
        </mdb-row>
        <mdb-row class="col-md-4">
          <mdb-col>
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg"
              alt="Sample image"
              class="img-fluid"
              v-animateOnScroll="'fadeInRight'"
            >
          </mdb-col>
          <mdb-col>
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).jpg"
              alt="Sample image"
              class="img-fluid"
              v-animateOnScroll="'fadeIn'"
            >
          </mdb-col>
          <mdb-col>
            <img
              src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"
              alt="Sample image"
              class="img-fluid"
              v-animateOnScroll="'rollIn'"
            >
          </mdb-col>
        </mdb-row>
      </div>
    </section>

  </div>

</template>

<script>
  import { mdbRow, mdbCol, animateOnScroll } from 'mdbvue';
  export default {
    name: 'awards',
    components: {
      mdbRow,
      mdbCol,
    },
    directives: {
      animateOnScroll
    }
  }
</script>

<style scoped>

</style>
